<template>
  <div class="playlist_tag">
    <header>
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">歌单标签</div>
    </header>
    <main>
      <div class="item" v-for="(item,index) in playlist_catlist_data.categories" :key="index">
        <div class="top">
          <div class="left">
            <span>{{item}}</span>
          </div>
        </div>
        <div class="content">
          <span
            v-for="(item1,index1) in playlist_catlist_data.sub"
            @click="jump(item1.type,item1.name)"
            :key="index1"
            v-if="item1.category == index"
            :class="item1.type? '':'opc'"
          >
            <i v-if="item1.hot"></i>
            <span>{{item1.name}}</span>
          </span>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("playlist_catlist", ["playlist_catlist_data"])
  },
  created() {
    this.$store
      .dispatch("playlist_catlist/getPlaylistCatlistData", {})
      .then(data => {});
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jump(type, name) {
      if (type) {
        this.$router.push({ name: "PlaylistItem", params: { name: name } });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.playlist_tag {
  main {
    padding: 0.3rem;
    padding-top: 1rem;
    .item {
      .content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        .opc {
          opacity: 0.3;
        }
        > span {
          display: inline-block;
          width: 2rem;
          background-color: #eee;
          color: #333;
          line-height: 0.75rem;
          border-radius: 2rem;
          margin-right: 0.3rem;
          margin-bottom: 0.3rem;
          i {
            display: inline-block;
            background: url(../images/aif.png) no-repeat;
            background-size: 100% 100%;
            width: 0.4rem;
            height: 0.4rem;
            vertical-align: middle;
            margin-right: 0.1rem;
          }
          span {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
      .top {
        line-height: 1rem;
        overflow: hidden;
        .left {
          float: left;
          span {
            font-size: 0.32rem;
          }
        }
      }
    }
  }
  header {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    left: 0rem;
    top: 0rem;
    background-color: #fff;
    overflow: hidden;
    position: fixed;
    z-index: 100;
    .left {
      position: absolute;
      top: 0.1rem;
      left: 0.2rem;
      height: 0.6rem;
      i {
        background: url(../images/axj.png) no-repeat;
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        display: inline-block;
      }
    }
    .center {
      font-size: 0.4rem;
      color: #333;
      text-align: left;
      padding-left: 1.2rem;
    }
  }
}
</style>